<template>
	<!--home.wxml-->
	<view>
		<view class="evaluation_list" v-for="(item, index) in evaluationList" :key="index">
			<view class="evaluation_top">
				<image class="head_img" :src="item.avatar ? item.avatar : head_url" />
				<view>
					<view class="evaluation_username">{{ item.userName }}</view>
					<view class="gray">{{ item.productName }}</view>
				</view>
			</view>
			<view class="evaluation_content">{{ item.content }}</view>
			<view class="evaluation_images">
				<image @click="previewImage(img)" v-for="img in item.images" class="icon" :src="img" :key="img"></image>
			</view>
			<view class="gray">{{ item.createTime }}</view>
		</view>
		<view class="no_more" v-if="!hasMore">- 没有更多了 -</view>
	</view>
</template>

<script>
import {
	mapState,
} from "vuex";
import { evaluationQuery } from "../../api/evaluation.js";
import { productByTag } from "../../api/product.js";
export default {
	data() {
		return {
			evaluationList: [],
			total: 0, //数据总数
			current: 1, //当前页码
			pageSize: 20, //每一页的商品数量
			hasMore: true,
			head_url: '../../static/img/personalCenter/avatar.png', //头像
		}
	},
	components: {
	},
	computed: {
		...mapState(["userToken"]),
	},
	mounted() {
	},
	onLoad() {
	},
	methods: {
		onLoad(params) {
			params.productId && this.evaluationQuery(params.productId);
		},
		evaluationQuery(productId) {

			evaluationQuery({
				productId: productId
			}).then((res) => {
				// console.log()
				if (res.code === 200) {
					res.data.records.forEach((e) => {
						e.images = e.images.split(',');
					})
					this.evaluationList = res.data.records;
					this.total = res.data.total;
					this.hasMore = (this.current * this.pageSize) < res.data.total;
				}
			})
		},
		//查询下一页的数据
		async queryNextPageDetails() {
			if (!this.hasMore) {
				return;
			}
			let current = this.current;
			current++;
			// uni.showLoading();
			// let res = await common.getProductByTag({
			// 	tag: this.tagIds,
			// 	pageNo: current,
			// 	pageSize: this.pageSize,
			// });
			// if (res.code === 200) {
			// 	this.productList = this.productList.concat(res.data.records);
			// 	this.hasMore = (current * this.pageSize) < res.data.total;
			// 	this.current = current;
			// }
			// uni.hideLoading();
			productByTag({
				tag: this.tagIds,
				pageNo: current,
				pageSize: this.pageSize,
			}).then((res) => {
				if (res.code === 200) {
					this.productList = this.productList.concat(res.data.records);
					this.hasMore = (current * this.pageSize) < res.data.total;
					this.current = current;
				}
			})
		},
		//上拉触底事件,加载下一页数据
		onReachBottom: function () {
			this.queryNextPageDetails();
		},
		previewImage(img) {
			uni.previewImage({
				urls: [img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function (res) { },
				fail: function (res) { },
				complete: function (res) { },
			})
		}
	}
}
</script>

<style scoped>
.evaluation_images {
	display: flex;
}

.evaluation_list {
	padding: 20rpx 40rpx;
	border-bottom: 20rpx solid #f7f7f7;
}

.evaluation_images image {
	width: 100rpx;
	height: 100rpx;
	margin-right: 10rpx;
}

.no_more {
	text-align: center;
	padding: 20rpx 0;
}

.gray {
	color: #b2b2b2;
}

.head_img {
	width: 100rpx;
	height: 100rpx;
	margin-right: 20rpx;
}

.evaluation_top {
	display: flex;
	margin-bottom: 10rpx;
}

.evaluation_username {
	margin-bottom: 10rpx;
}

.evaluation_content {
	margin-bottom: 10rpx;
}
</style>